<template>
  <div :class="{ inline: inline }">
    <div class="spanMar" v-if="this.label" style="font-size: 16px">{{ this.label }}</div>
    <div class="defaultStyle">
      <Icon :name="prefix" v-if="this.prefix"></Icon>
      <input
        :type="showPassword ? (changePass ? 'password' : 'text') : type"
        :value="modelValue"
        @input="handleInput"
        :placeholder="placeholder"
        :disabled="disabled"
        class="inputDefault"
        :class="{ disabled: disabled }"
      />
      <Icon :name="suffix" v-if="this.suffix"></Icon>
      <Icon
        :name="changePass ? 'yanjing' : 'yanjing1'"
        v-if="this.type == 'password' && modelValue"
        @click="changePass = !changePass"
      ></Icon>
      <Icon name="close-circle" v-if="this.clearable && modelValue" @click="clear"></Icon>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import Icon from '../Icon/index.vue'
export default defineComponent({
  name: 'Input',
  data() {
    return {
      changePass: {
        type: Boolean,
        default: false,
      },
    }
  },
  props: {
    label: {
      type: String,
      default: '',
    },
    value: {
      type: String,
      default: '',
    },
    placeholder: {
      type: String,
      default: '',
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    prefix: {
      type: String,
      default: '',
    },
    suffix: {
      type: String,
      default: '',
    },
    type: {
      type: String,
      default: 'text',
    },
    inline: {
      type: Boolean, //变为行内元素，默认false
      default: false,
    },
    clearable: {
      type: Boolean,
      default: false,
    },
    modelValue: {
      type: String,
      default: '',
    },
    showPassword: {
      type: Boolean,
      default: false,
    },
  },
  emit: ['input'],
  components: {
    Icon,
  },
  methods: {
    handleInput(e) {
      this.$emit('update:modelValue', e.target.value)
    },
    clear() {
      this.$emit('update:modelValue', '')
    },
  },
})
</script>
<style lang="scss">
.inline {
  display: flex;
  align-items: center;
}
.spanMar {
  margin-right: 10px;
}
.defaultStyle {
  height: 32px;
  border-radius: 4px;
  border: 1px solid #d9d9d9;
  width: 350px;
  color: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  padding: 4px 6px;
  &:focus {
    border: 1px solid blue;
  }
  .inputDefault {
    border: 0;
    height: 100%;
    text-indent: 4px;
    outline: none;
    width: 100%;
  }
  .disabled {
    cursor: not-allowed;
    background: rgb(245, 245, 245);
  }
}
</style>
